<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        #content{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 40px;
        }
        .el-icon-circle-plus{
            font-size: 3em;
            display: block;
            text-align: center;
            z-index: auto;
            position: relative;
            line-height: 0;
        }
    </style>
</head>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <div class="content-wrap">
            <div class="content" style="margin-right: 0px">
                <div class="title">
                    <h3>我的关注({{concernList.length}})</h3>
                </div>
                <h1 v-if="isHave==false" style="text-align: center">暂无关注记录!</h1>
                <article class="excerpt excerpt-1" style="height: 150px; padding-left: 50px" v-for="(c,index) in concernList" >
                    <a @click="" class="focus" style="width: 150px; margin-left: 0px">
                        <div @click="goPersonalHtml(c.id)">
                            <el-avatar :size="100" :src="c.image"></el-avatar>
                        </div>
                    </a>
                    <div style="display: flex;">
                        <div style="width: 222px">
                            <header style="margin-bottom: 20px">
                                <h2><a @click="goPersonalHtml(c.id)" title="" style="font-weight: 400; font-size: 20px">{{c.userName}}</a></h2>
                            </header>
                            <p class="meta">
                                <span class="views"> 经纪人：{{c.userName}}</span><br><br>
                                <span class="views"> 信誉度：{{reputation(c.reputation)}}</span>
                            </p>
                        </div>
                        <p class="meta" style="margin: auto 0;font-size: 28px;color: red;font-weight: 400;float: right;">
                            <el-button v-if="c.concern==false" @click="removeConcern(c.id,index)" style="margin-left: 400px;" type="info" plain>已关注</el-button>
                            <el-button v-else @click="addConcern(c.id,index)" style="margin-left: 400px;width: 84px" type="danger"> 关注 </el-button>
                        </p>
<!--                        <a style="margin: auto 100px; font-size: 2em" class="el-icon-more"></a>-->
                        <el-dropdown style="margin: auto 100px;">
                            <span class="el-dropdown-link">
                                <i style="font-size: 2em" class="el-icon-more"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>黄金糕</el-dropdown-item>
                                <el-dropdown-item>狮子头</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </div>
                </article>
            </div>
        </div>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            concernList: {},
            user: {},
            list: {},
            isHave: false,
            current: 1,
            size: 3,
            total: 0,
            userId: "",
            isConcern: true,
        },
        created(){
            this.onlogin();
            this.$forceUpdate();
        },
        methods:{
            onlogin(user){
                console.log(user);
                this.user = user;
                setTimeout(()=>{
                    this.query();
                },500)
            },
            query(){
              axios.post("concern/selectConcerns?userId=" + this.user.id).then(res=>{
                  console.log(res.data)
                  this.concernList = res.data;
                  if (this.concernList.length != 0){
                      this.isHave = true;
                  }
                  for (let i = 0; i < this.concernList.length; i++) {
                      axios.post("concern/selectConcern?userId=" + this.user.id + "&masterId=" + this.concernList[i].id).then(res=>{
                          this.concernList[i].concern = res.data.isConcern==false;
                      })
                  }
              })
            },
            addConcern(masterId,index){
                axios.post("concern/insertConcern?userId=" + this.user.id + "&masterId=" + masterId).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isHaveConcern(index);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            removeConcern(masterId,index){
                axios.post("concern/deleteConcern?userId=" + this.user.id + "&masterId=" + masterId).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.isHaveConcern(index);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            isHaveConcern(index){
                axios.post("concern/selectConcern?userId=" + this.user.id + "&masterId=" + this.concernList[index].id).then(res=>{
                    this.concernList[index].concern = res.data.isConcern==false;
                })
            },
            reputation(reputation){
                return reputation>90?'优':(reputation>70?'良':'差');
            },
            backManage(){
                this.isManage = false;
                this.folderIds = [];
            },
            manage(){
                this.isManage = true;
            },
            fSelect(folderId){
                this.folderIds.push(folderId);
            },
            tSelect(folderId){
                for (let i = 0; i < this.folderIds.length; i++){
                    if (this.folderIds[i] == folderId){
                        this.folderIds.splice(i, 1);
                    }
                }
            },
            allSelect(){
                this.folderIds = [];
                this.folderIds = this.allFolderId;
            },
            back(){
                this.folderName = "";
                this.addFolderWinVisiable = false;
            },
            goPersonalHtml(userId) {
                localStorage.setItem("userId", userId);
                location.href = "personalPage.html";
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                //this.$forceUpdate();
                console.log(`当前页: ${val}`);
                this.selectFolder();
            },
        },
        computed:{
            isSelect(){
                return true;
            }
        }
    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>